@charset "utf-8";
@import "reset";

@function r($px) {
    @return $px/100px * 1rem;
}
body{
    background-color: #1e1e1e;
.web{
    width: r(640px);
    header{
        width: r(640px);
        height: r(89px);
        background-color: #1e1e1e;
        display: flex;
        justify-content: flex-start;
        position: relative;
        border-bottom: 1px solid #484848;
        .web2{
            width: r(52px);
            height: r(52px);
            background-color: #b60005;
            border-radius: 50%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            margin: r(20px) r(77px) r(17px) r(12px);
        p{
            text-align: center;
            font-size: 14px;
            color: #FFFFFF;
            margin-top: r(6px);
        }
        }
        .max{
            height: 44px;
            position: relative;
            
        i{
            color: #FFFFFF;
            position: absolute;
            left: r(18px);
            top: r(33px);
            z-index: 2;
        }
        input{
            width: r(480px);
            height: r(54px);
            font-size: 12px;
            background-color: #1E1E1E;
            border-radius: 50px;
            border: 1px solid #d2d2d2;
            padding-left: 40px;
            margin: r(20px) r(19px) r(10px) 0;
            color: #7e7e7e;
            position: absolute; 
            }
            
        }
    }
    .main{
        background-color: #1e1e1e;
         width: r(640px);
        .mia{
            margin: r(116px) 0 r(27px) 0;
            text-align: center;
            font-size: 0;
            img{
                width: 50%;
            }
        }
        .miz{
             margin-bottom: r(70px);
            h3{
                font-size: r(28px);
                color: #fefdfb;
                text-align: center;
                a{
                    color: #FFFFFF;
                }
            }
        
            p{
                text-align: center;
                padding-top: r(13px);
                font-size: r(22px);
                color: #454545;
                a{
                    color: #454545;
                }
            }
        }
        .box {
                width: r(640px);
                height: r(643px);
                background: #222222;
                border-top: r(23px) solid #303030;
            }
            
            .box ul {
                width: 100%;
                margin: 0;
                padding: 0;
            }
            
            .box li {
                list-style: none outside none;
                display: block;
                margin: 0;
                padding: 0;
                height: r(100px);
                width: 100%;
                overflow: hidden;
                background: #222222;
                transition-delay: 0.5s;
            }

            .box h3 {
                font-size: r(26px);
                margin: 0;
                height: r(80px);
                color: #FFFFFF;
                background: #222222;
                cusor: pointer;
                position:relative;
                padding-left: r(34px);
                border-bottom: 1px solid #454545;
                padding-top: r(10px);
            }
            span{
                margin-left: r(480px);
                margin-right: r(20px);
            } 
            .bom{
                position: absolute;
                right: 5.3%;                
            }
            .box li:hover {
                height: r(200px);
            }
            
            .box li:hover h3 {
                color: #FFFFFF;
                background: #222222;
            }
            
            .box div {
                margin: 0;
                color: #FFFFFF;
                font-size: r(26px);
                z-index: 2;
                padding-left: r(34px);
                padding-top: r(20px);                
            }
            .box li h3 span{
                transition: all 0.3s;
                 display: inline-block;
            }
            .box li:hover h3 span{
                transform: rotateZ(90deg);
            }
    }
     
  }
}